<template>
  <div>
    <el-input
        class="input-with-select"
        v-model="components_fuzzy_search.value"
        @keyup.enter="autocomplete_big_info()"
        @blur="check_input"
        ref="inputRef"
    >

      <template #prepend>
        <el-radio-group v-model="components_fuzzy_search.mode">
          <el-radio-button value="助记码">助记码</el-radio-button>
          <el-radio-button value="名称">名称</el-radio-button>
        </el-radio-group>
      </template>

      <template #append>
          <el-button @click="clear_all()">
            <el-icon>
              <Delete/>
            </el-icon>
          </el-button>
      </template>

    </el-input>
  </div>

  <!-- 弹出选择框 -->
  <el-dialog v-model="visible" :width="500" @close="dialog_close">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        @row-dblclick="select_small"
        stripe

    >
      <el-table-column type="index" width="50"/>
      <el-table-column prop="mnemonic" label="助记码"/>
      <el-table-column prop="name" label="分组名称"/>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[100, 200, 500]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total=" total "
    />
  </el-dialog>

</template>

<script setup lang="ts">
import {Delete} from "@element-plus/icons-vue";
import {reactive, ref, watch} from "vue";
import {req_material_group_fuzzy_search} from "@/api/inventory/material_group";
import {
  MaterialGroupFuzzySearchResp,
  MaterialGroupList
} from "@/api/inventory/material_group/type.ts";

// 检查失去焦点后，看填充的内容是否被修改
const check_input = () => {
  if ((components_fuzzy_search.value !== components_fuzzy_search.old_value) && visible.value === false)
    components_fuzzy_search.value = components_fuzzy_search.old_value
}

// 小类列表前端分页
const background = ref<boolean>(true)  // 是否带背景方框
const disabled = ref<boolean>(false)  // 是否可用
const small = ref<boolean>(false)  // 普通大小还是小一号
const currentPage = ref<number>(1)  // 当前所在页数
const pageSize = ref<number>(100)  // 一页有几条记录
const total = ref<number>(0) // 总条数
watch([currentPage, pageSize], () => {
  return_material_group_list()
})
let tableData: MaterialGroupList[] = []

// 弹出选择框
const visible = ref(false)

// 大类类型
export interface MaterialGroupCompletion {
  value: string
  old_value: string
  mode: '助记码' | '名称'

  id: number | null
  enable: 'enable' | 'not_enable' | 'all'
  mnemonic: string | null
  name: string | null
  start: number
  stop: number
}

// 大类名称搜索
const components_fuzzy_search = reactive<MaterialGroupCompletion>({
  value: '',
  old_value: '',
  mode: '助记码',

  id: null,
  enable: 'enable',
  mnemonic: null,
  name: null,
  start: 0,
  stop: 0
})

// 后台搜索
const autocomplete_big_info = () => {
  if ((components_fuzzy_search.value !== components_fuzzy_search.old_value) || components_fuzzy_search.value === '' || components_fuzzy_search.value === null) {
    // 执行查询操作
    return_material_group_list()
  }
}

const return_material_group_list = () => {
  let temp_name = null
  let temp_mnemonic = null
  if (components_fuzzy_search.mode === '名称') {
    temp_name = components_fuzzy_search.value
  } else {
    temp_mnemonic = components_fuzzy_search.value
  }
  req_material_group_fuzzy_search({
    enable: 'enable',
    mnemonic: temp_mnemonic,
    name: temp_name,
    start: (currentPage.value - 1) * pageSize.value,
    stop: currentPage.value * pageSize.value,
  }).then((result: MaterialGroupFuzzySearchResp) => {
    // 弹出选择框
    visible.value = true
    tableData = result.data.result
    total.value = result.data.total
  })
}


const clear_all = () => {
  clear_input()
  cmy('DataClear')
}

const inputRef = ref() // 用于关闭选择框之后使得选择框重新选中

// 选择框关闭时输入框恢复焦点
const dialog_close = () => {
  inputRef.value.focus()
}

const select_small = (row: MaterialGroupList) => {
  components_fuzzy_search.value = row.name
  components_fuzzy_search.old_value = row.name

  components_fuzzy_search.mnemonic = row.mnemonic
  components_fuzzy_search.name = row.name
  components_fuzzy_search.id = row.id

  cmy('DataUse', components_fuzzy_search)
  visible.value = false
}

// 在本子组件内触发该函数后，在父组件中执行一个函数
// DataUse：将选定的值待到父组件中
// DataClear：清空所选后，在父组件中执行操作
const cmy = defineEmits(["DataUse", "DataClear"]);


// 指定输入框中的值
const make_input_value = (val: string) => {
  components_fuzzy_search.value = val
  components_fuzzy_search.old_value = val
}

// 清除输入框中的内容
const clear_input = () => {
  components_fuzzy_search.value = ''
  components_fuzzy_search.old_value = ''
  components_fuzzy_search.id = null
}

// 向外暴露的方法，分别是清空输入框，设置输入框中的值
defineExpose({clear_input, make_input_value});


const abc = defineProps(["disable", 'content']);
if (abc.content !== undefined) {
  components_fuzzy_search.value = components_fuzzy_search.old_value = abc.content
} else {
  components_fuzzy_search.value = components_fuzzy_search.old_value = ''
}
</script>

<style>
.input-with-select .el-input-group__prepend {
  padding: 0;
}
</style>